<script setup lang="ts">
import { VbenIcon } from '@vben/icons';

import { Tooltip } from 'ant-design-vue';

interface Props {
  text?: string;
  help?: string;
}

withDefaults(defineProps<Props>(), {
  text: '',
  help: '',
});
</script>

<template>
  <div
    class="common-title relative inline-block flex items-center gap-1 pl-[13px] text-[16px] font-bold"
  >
    <span>{{ text }}</span>
    <Tooltip v-if="help" :title="help">
      <VbenIcon icon="material-symbols:help-outline-rounded" />
    </Tooltip>
    <slot></slot>
  </div>
</template>

<style scoped lang="scss">
.common-title {
  &::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    height: 17px;
    margin: auto;
    content: '';
    background-color: hsl(var(--primary));
    border-radius: 1px;
  }
}
</style>
